<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>根作用域</title>
  </head>
  <body>
    <!-- 
        该函数接受一个数据对象，该对象用作所有表达式的根作用域。这可用于引导简单的一次性应用：createApp
     -->
    <script type="module">
      import { createApp } from "https://unpkg.com/petite-vue?module";

      createApp({
        // exposed to all expressions
        count: 0,
        // getters
        get plusOne() {
          return this.count + 1;
        },
        // methods
        increment() {
          this.count++;
        },
      }).mount();
    </script>

    <!-- v-scope value can be omitted -->
    <div v-scope>
      <p>{{ count }}</p>
      <p>{{ plusOne }}</p>
      <button @click="increment">increment</button>
    </div>
  </body>
</html>
